<script setup>
import { ref } from 'vue'
import OptionsPicker from '@/components/OptionsPicker/index.vue';

const ztList = ref([
    {
        name: 'OP01',
        num: '88%'
    },
    {
        name: 'OP02',
        num: '68%'
    },
    {
        name: 'OP03',
        num: '28%'
    },
    {
        name: 'OP04',
        num: '82%'
    },
    {
        name: 'OP05',
        num: '38%'
    },
    {
        name: 'OP06',
        num: '48%'
    },
    {
        name: 'OP07',
        num: '81%'
    }
])
</script>

<template>
    <div class="com-side-card card">
        <div class="com-card-head">
            <h1>设备状态</h1>
            <OptionsPicker />
        </div>
        <div class="com-block-content block">
            <img src="./assets/img/yd1.png" alt="" />
            <strong class="number">12345</strong>
            <span class="unit">Kwh</span>
        </div>
    </div>
</template>

<style scoped lang="scss">
.card {
    height: 132px;

    .block {
        margin-top: 10px;
        gap: 5px;
        align-items: center;
        justify-content: center;
        background: url(./assets/img/yd2.png) no-repeat;
        background-size: 100% 100%;

        .number {
            font-size: 28px;
            font-weight: bold;
            color: #28e2ff;
        }

        .unit {
            font-size: 32px;
            font-weight: bold;
            color: #28e2ff;
        }
    }
}</style>
